<template>
	<view class="orderpay">
		<view class="orderinfo">
			<view class="price">
				￥{{data.pay_amount}}
			</view>
			<view class="payfor" v-if="this.data.order_type != 3">
				<view class="text">
					<image src="/static/index/order1.png" mode=""></image>
					<text>余额支付</text>
				</view>
				<label>
					<radio @click="choose_pay(1)" :checked="pay_type == 1" />
				</label>
			</view>
			<view class="payfor">
				<view class="text">
					<image src="/static/index/order1.png" mode=""></image>
					<text>奖金支付</text>
				</view>
				<label>
					<radio @click="choose_pay(4)" :checked="pay_type == 4" />
				</label>
			</view>
			<view class="payfor">
				<view class="text">
					<image src="/static/index/order1.png" mode=""></image>
					<text>扫码支付</text>
				</view>
				<label>
					<radio @click="choose_pay(6)" :checked="pay_type == 6" />
				</label>
			</view>
			<view class="wimg" v-if="pay_type == 6">
				<image :src="data.wechat" mode="widthFix"></image>
			</view>
			<view class="charge_1" v-if="pay_type == 6">
				<text class="title">支付凭证</text>
				<fjjImages :pageImgList="wximg" @getwximgurl="getwximgurl" :type="geturl[0]" :imgCount="1"
					@addImg="editParkImg" @deleteImg="deleteImg"></fjjImages>
			</view>
		</view>

		<button class="sure" :loading="loading" :disabled="loading" @click="pay">
			确认支付
		</button>
		<view class="bg" v-if="isSure">
			<view class="password">
				<view class="title">
					<text>请输入支付密码</text>
					<text @click="close">X</text>
				</view>
				<view class="password_input">
					<input type="password" v-model="password" placeholder="请输入支付密码"
						placeholder-style="font-size:14px;color:#777" />
				</view>
				<view class="getbtn">
					<view class="btn1" @click="sure">
						确认
					</view>
					<view class="btn2" @click="close">
						取消
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		OrderPay,
		OrderSub
	} from '../../api/api.js'
	import fjjImages from '@/components/fjj-images/fjj-images.vue'
	export default {
		components: {
			fjjImages
		},
		data() {
			return {
				geturl: ['getwximgurl', 'getzfbimgurl'],
				wximg: [],
				price: 0.00,
				isSure: false,
				password: '',
				orderid: '',
				data: {
					pay_amount: 0
				},
				pay_type: 1,
				loading: false
			}
		},
		onLoad(e) {
			this.orderid = e.orderid
			this.OrderPay()
		},
		methods: {
			getwximgurl(e) {
				this.wximg = e
			},
			editParkImg(currentTempFilePath) {},
			deleteImg(index) {},
			//支付方式
			choose_pay(pay_type) {
				this.pay_type = pay_type
			},
			// 支付页详情
			OrderPay() {
				OrderPay({
					order_id: this.orderid
				}).then(res => {
					this.data = res.data
					this.data.wechat = this.websiteUrl + this.data.wechat
				})
			},
			// 提交支付
			OrderSub() {
				var that = this
				OrderSub({
					order_id: that.data.id,
					password: that.password,
					pay_type: that.pay_type,
					img: that.wximg[0] || ''
				}).then(res => {
					that.loading = false
					if (res.status == 1) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/order/index'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			pay() {
				this.isSure = true
				this.loading = true
			},
			close() {
				this.isSure = false
				this.loading = false
			},
			sure() {
				if (this.password == '') {
					uni.showToast({
						title: '请输入支付密码',
						icon: 'none'
					})
				} else {
					this.isSure = false
					this.OrderSub()
				}
			}
		}
	}
</script>

<style lang="scss">
	.charge_1 {
		.title {
			font-size: 16px;
			padding-left: 10px;
		}
	}

	.wimg {
		display: flex;
		justify-content: center;

		image {
			width: 50%;
		}
	}

	.orderpay {
		padding-top: 40rpx;

		.orderinfo {
			background: #fff;
			width: 94%;
			margin: 0 auto;

			.price {
				text-align: center;
				font-size: 60rpx;
				padding: 60rpx 0;
				border-bottom: 1px solid #ccc;
			}

			.payfor {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 40rpx;

				.text {
					display: flex;
					align-items: center;

					image {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
				}
			}
		}

		.sure {
			width: 80%;
			background: linear-gradient(to right, #4e9c6e, #265238);
			margin: 40px auto;
			height: 50px;
			line-height: 50px;
			text-align: center;
			border-radius: 20px;
			color: #ffff;
			margin-bottom: 20px;
		}
	}

	.bg {
		background: #00000033;
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;

		.password {
			background: #fff;
			position: absolute;
			width: 90%;
			left: 5%;
			top: 60vw;

			.title {
				display: flex;
				justify-content: space-between;
				padding: 4% 5%;
				font-size: 28rpx;
				background: #f8f8f8;
			}

			.password_input {
				border: 1px solid #ccc;
				width: 70%;
				margin: 70rpx auto;

				input {
					padding-left: 40rpx;
					height: 80rpx;
				}
			}

			.getbtn {
				display: flex;
				justify-content: flex-end;
				margin-top: 170rpx;
				padding-bottom: 40rpx;

				view {
					padding: 10rpx 30rpx;
					font-size: 28rpx;
				}

				.btn1 {
					background: #1E9FFF;
					color: #fff;
				}

				.btn2 {
					border: 1px solid #ccc;
					color: #777;
					margin: 0 40rpx;
				}
			}

		}
	}
</style>